<div th:fragment="html" xmlns:th="http://www.w3.org/1999/xhtml">
    <script>
        $(function () {
            var pid = getUrlParms("pid");
            var data4Vue = {
                uri: 'foreproduct',
                p: '',
                category: null,
                firstProductImage: null,
                pvs: [],
                reviews: [],
                showDetail: true,
                showReview: false,
                user: {name: '', password: ''},
                historyEntityList: [],
                goodsPrice: '1',
                histTime: '',
                seen: true,
                endDate: '',
                gapTime: ''
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                    linkDefaultActions();
                    this.load();
                },
                methods: {
                    load: function () {

                        var url = this.uri + "/" + pid;
                        axios.get(url).then(function (response) {

                            var result = response.data;
                            vue.p = result.data.product;
                            var endDate = vue.p.endDate;
                            console.log(endDate)
                            // var gapTime = countTime(endDate, nowTime);

                            var arr = vue.p.historyEntityList

                            this.histTime = arr.length
                            vue.pvs = result.data.pvs;
                            vue.reviews = result.data.reviews;
                            vue.category = vue.p.category;
                            vue.firstProductImage = vue.p.firstProductImage;
                            vue.$nextTick(function () {
                                imgAndInfoPageRegisterListeners(vue);
                            })
                        });

                    },
                    //获取uuid
                    deposit: function guid2() {
                        function S4() {
                            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                        }

                        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
                    },

                    toggle2Detail: function () {
                        this.showDetail = true;
                        this.showReview = false;
                    },
                    toggle2Review: function () {
                        this.showDetail = false;
                        this.showReview = true;
                    }
                }
            });


        });
    </script>

    <title>模仿天猫官网 -- {{p.name}}</title>
    <div class="categoryPictureInProductPageDiv">
        <img v-if="category!=null" class="categoryPictureInProductPage" :src="'img/category/'+category.id+'.jpg'">
    </div>
    <div class="productPageDiv">

        <script>
            function imgAndInfoPageRegisterListeners(vue) {
                var stock = vue.p.stock;
                //   var now_price = vue.p.promotePrice;//当前价格
                var now_price = vue.p.historyEntityList[0].goodsPrice;//当前价格
                if (now_price == null) {
                    console.log("空")
                    this.seen = false;
                } else {
                    console.log("非空")
                    this.seen = true;
                }
                // console.log(now_price + "第一位")
                //价格
                $(".productPriceSetting").blur(function () {
                    var price = $(".productPriceSetting").val();
                    // console.log(price)
                    //   console.log(now_price + "第二位")
                    if (isNaN(price) || price == "" || price.length == 0)
                        price = now_price + 0.01;
                    price = parseFloat(price).toFixed(2);
                    if (price <= 0)
                        price = now_price + 0.01;
                    price = parseFloat(price).toFixed(2)
                    if (price < now_price)
                        price = now_price + 0.01;
                    price = parseFloat(price).toFixed(2)
                    if (price > now_price * 2)
                        price = now_price * 2
                    price = parseFloat(price).toFixed(2)
                    $(".productPriceSetting").val(price);
                });

                $(".increasePrice").click(function () {
                    var price = $(".productPriceSetting").val();
                    price = price * 1.1;
                    price = price.toFixed(2)
                    if (price < now_price)
                        price = now_price;
                    if (price > now_price * 2)
                        price = now_price * 2
                    $(".productPriceSetting").val(price);
                });
                $(".decreasePrice").click(function () {
                    var price = $(".productPriceSetting").val();
                    --price;
                    if (price < now_price)
                        price = now_price;
                    $(".productPriceSetting").val(price);
                });
                /*//数量不再用
                $(".productNumberSetting").keyup(function () {
                    var num = $(".productNumberSetting").val();
                    num = parseInt(num);
                    if (isNaN(num))
                        num = 1;
                    if (num <= 0)
                        num = 1;
                    if (num > stock)
                        num = stock;
                    $(".productNumberSetting").val(num);
                });

                $(".increaseNumber").click(function () {
                    var num = $(".productNumberSetting").val();
                    num++;
                    if (num > stock)
                        num = stock;
                    $(".productNumberSetting").val(num);
                });
                $(".decreaseNumber").click(function () {
                    var num = $(".productNumberSetting").val();
                    --num;
                    if (num <= 0)
                        num = 1;
                    $(".productNumberSetting").val(num);
                });
    */
                $(".addCartButton").removeAttr("disabled");
                $(".addCartLink").click(function () {     //已加入购物车功能前端实现
                    var url = "forecheckLogin";
                    axios.get(url).then(function (response) {
                        if (0 == response.data.code) {
                            var pid = vue.p.id;
                            var url = "favorite?pid=" + pid;
                            //添加收藏
                            axios.get(url).then(function (response) {
                                var result = response.data;
                                // console.log("收藏成功")
                                $(".addCartButton").css("background-color", "grey");
                                //按钮失效
                                $(".addCartButton").attr('disabled', "true");
                                // $(".addCartButton").attr("style", "display:none;")
                            });
                        } else {
                            $("#loginModal").modal('show');
                        }
                    });
                });
                //点击立即购买事件跳转结算业务页面 buyPage.html
                $(".buyLink").click(function () {
                    var url = "forecheckLogin";
                    var depositetest = vue.deposit();
                    console.log(depositetest);
                    axios.get(url).then(function (response) {

                        if (0 == response.data.code) {//到此代表登录成功

                            var pid = vue.p.id;
                            //不再有数量,只有提交保证金 var num = $(".productNumberSetting").val();
                            var price = $(".productPriceSetting").val();
                            var depmoney = price / 5;
                            depmoney = parseFloat(depmoney).toFixed(2);
                            //var deposit=this.deposite();
                            console.log("depositetest为" + depositetest)
                             url = "dep?pid=" + pid + "&money=" + depmoney + "&subject=woniusale" + "&deposit_id=" + depositetest;
                            axios.get(url).then(function (response) {
                                location.href = url;
                            });
                        } else {
                            $("#loginModal").modal('show');
                        }
                    });
                    return false;
                });

                $("button.loginSubmitButton").click(function () {
                    var url = "forelogin";
                    if (0 == vue.user.name.length) {
                        $("span.errorMessage").html("请输入用户名");
                        $("div.loginErrorMessageDiv").css("visibility", "visible");
                        return;
                    }
                    if (0 == vue.user.password.length) {
                        $("span.errorMessage").html("请输入密码");
                        $("div.loginErrorMessageDiv").css("visibility", "visible");
                        return;
                    }

                    axios.post(url, vue.user).then(function (response) {
                        var result = response.data;
                        if (result.code == 0) {
                            location.href = "product?pid=" + vue.p.id;
                        } else {
                            $("span.errorMessage").html(result.message);
                            $("div.loginErrorMessageDiv").css("visibility", "visible");
                        }
                    });
                });

                $("img.smallImage").mouseenter(function () {
                    var bigImageURL = $(this).attr("bigImageURL");
                    $("img.bigImg").attr("src", bigImageURL);
                });

                $("img.bigImg").load(
                    function () {
                        $("img.smallImage").each(function () {
                            var bigImageURL = $(this).attr("bigImageURL");
                            img = new Image();
                            img.src = bigImageURL;

                            img.onload = function () {
                                $("div.img4load").append($(img));
                            };
                        });
                    }
                );
            }

        </script>

        <div class="imgAndInfo">

            <div class="imgInimgAndInfo">
                <img v-if="firstProductImage!=null" :src="'img/productSingle/'+firstProductImage.id+'.jpg'"
                     class="bigImg">
                <div class="smallImageDiv">
                    <img v-for="pi in p.productSingleImages" :src="'img/productSingle_small/'+pi.id+'.jpg'"
                         :bigImageURL="'img/productSingle/'+pi.id+'.jpg'" class="smallImage">
                </div>
                <div class="img4load hidden"></div>
            </div>


            <div class="infoInimgAndInfo">

                <div class="productTitle">
                    {{p.name}}
                </div>
                <div class="productSubTitle">
                    {{p.subTitle}}
                </div>


                <div class="productPrice">
                    <div class="juhuasuan">
                        <span class="juhuasuanBig">聚划算</span>
                        <span>拍卖即将终止，<span class="juhuasuanTime">{{p.endDate|formatDateFilter}}</span>结束，</span>
                    </div>


                    <div class="productPriceDiv">
                        <div class="gouwujuanDiv"><img height="16px" src="img/site/gouwujuan.png">
                            <span> 全天猫实物商品通用</span>

                        </div>
                        <div class="originalDiv">
                            <span class="originalPriceDesc">原价</span>
                            <span class="originalPriceYuan">¥</span>
                            <span class="originalPrice">
	                    	{{p.originalPrice|formatMoneyFilter}}
	                    </span>
                        </div>

                        <div class="promotionDiv">
                            <span class="promotionPriceDesc">当前出价 </span>
                            <span class="promotionPriceYuan">¥</span>
                            <span class="promotionPrice"
                                  v-for="(his,index)  in p.historyEntityList"
                                  v-if="index==0">
                                {{his.goodsPrice}}
	                        </span>
                           <!-- <div v-if="block==null ? true : false ">block为true显示</div>
                            <div v-else>block为false显示</div>-->
                        </div>

                    </div>
                </div>

                <div class="productSaleAndReviewNumber">
                    <!--
                                    <div>累计竞价次数 <span class="redColor boldWord"> {{ p.saleCount }}</span></div>
                    -->
                    <div>累计竞价次数 <span class="redColor boldWord"> {{p.histTime}} </span></div>

                    <div>累计评价 <span class="redColor boldWord"> {{ p.reviewCount }}</span></div>

                    <br>
                    <br>

                    <div>点击量 <span class="redColor boldWord"> {{p.cilck}}</span></div>

                </div>
                <div class="productNumber">
                    <span>您准备出的价格</span>
                    <input  v-for="(his,index)  in p.historyEntityList"
                            v-if="index==0" :value="his.goodsPrice" class="productPriceSetting" style="height: 40px">
<!--
                    <input :value="p.promotePrice" class="productPriceSetting" style="height: 40px">
-->

                    <span>
	                <span class="arrow">
	                    <a href="#nowhere" class="increasePrice">
	                    <span class="updown" style="height: 15px">
	                            <img src="img/site/increase.png">
	                    </span>
	                    </a>

	                    <span class="updownMiddle"> </span>
	                    <span class="updownMiddle"> </span>

	                    <a href="#nowhere" class="decreasePrice">
	                    <span class="updown" style="height: 15px">
	                            <img src="img/site/decrease.png">
	                    </span>
	                    </a>

	                </span>

	            元</span>
                    <!--
                                            <span>库存{{p.stock}}件</span>
                    -->
                </div>
                <!--
                            <div class="productNumber">
                                <span>数量</span>
                                <span>
                                    <span class="productNumberSettingSpan">
                                    <input class="productNumberSetting" type="text" value="1">
                                    </span>
                                    <span class="arrow">
                                        <a href="#nowhere" class="increaseNumber">
                                        <span class="updown">
                                                <img src="img/site/increase.png">
                                        </span>
                                        </a>

                                        <span class="updownMiddle"> </span>

                                        <a href="#nowhere" class="decreaseNumber">
                                        <span class="updown">
                                                <img src="img/site/decrease.png">
                                        </span>
                                        </a>

                                    </span>

                                件</span>
                            </div>
                -->
                <div class="serviceCommitment">
                    <span class="serviceCommitmentDesc">温馨提示</span>
                    <span class="serviceCommitmentLink">
	                <a href="#nowhere">保证金金额为商品价格的五分之一</a>
	            </span>
                </div>

                <div class="buyDiv">
                    <a class="buyLink">
                        <button class="buyButton">提交保证金</button>
                    </a>
                    <a href="#nowhere" class="addCartLink">
                        <button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>添加收藏
                        </button>
                    </a>
                </div>
            </div>

            <div style="clear:both"></div>

        </div>
        <div th:replace="include/fore/product/productReview::html"></div>
        <div th:replace="include/fore/product/productDetail::html"></div>
    </div>
</div>
